<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>HTML5钢琴</title>
  
  <style type="text/css">
	*{
		margin:0px;
		padding:0px;
		
	}
	.zzr{
		width: 180px;
		height: 120px;
		position: absolute;
		top: 400px;
		right: 120px;	
	}
	ul{
		width:480px;
		height:360px;
		margin:50px auto;
	}
	li{
		float:left;
		list-style-type: none;
		position: relative;
	}
	li>div{
		height: 360px;
		width: 60px;
		border: 2px solid;
		border-color:#666;
		border-bottom-left-radius : 8px;
		border-bottom-right-radius: 8px;
		box-sizing: border-box;
		box-shadow: /*inset  3px 0  10px  #c9c6c6,*/
					inset 5px -8px  0  #eeebeb;
	}
	li:not(:last-child)>div{
		border-right: none;
	}
	li>div:hover{
		background: linear-gradient(45deg, #dad9d9, #ffffff);

	}
	li>div:active{
		box-shadow: inset 3px -2px  0  #eeebeb;
	}

	li>p{
		height: 200px;
		width: 40px;
		background-color: #000;
		border-bottom-left-radius : 5.5px;
		border-bottom-right-radius: 5.5px;
		box-shadow: inset 5px -7px 0 #2c2c2c;
		position: absolute;
		top:0;
		left: 40px;
		z-index: 999;
	}
	li>p:hover{
		background: linear-gradient(45deg, #4c4c4c, #444444);

	}
	li>p:active{
		box-shadow:inset 3px -5px 0 #2c2c2c;

	}
 </style>
 </head>
 <body>
	<ul>
		<li><div></div><p></p></li>
		<li><div></div><p></p></li>
		<li><div></div></li>
		<li><div></div><p></p></li>
		<li><div></div><p></p></li>
		<li><div></div><p></p></li>
		<li><div></div></li>
		<li><div></div></li>
	</ul>
    <div class="zzr"></div>
<script>
	for(var i=1; i<=8; i++){
		var addaudio=document.createElement("audio");
		addaudio.setAttribute("src","audios/"+"w"+i+".ogv")
		document.body.appendChild(addaudio);
	}
	for(var i=1; i<=5; i++){
		var addaudio=document.createElement("audio");
		addaudio.setAttribute("src","audios/"+"b"+i+".ogv")
		document.body.appendChild(addaudio);
	}
	var audios=document.getElementsByTagName("audio"),
		buttons=document.querySelectorAll("ul>li>div"),
		blacks=document.querySelectorAll("ul>li>p");
	//alert(blacks.length);
	for (var i=0; i<8; i++){
		buttons[i].index=i;
		buttons[i].onclick=function(){
			//alert(this.index);
			audios[this.index].load();
			audios[this.index].play();
			//alert(audios[this.index].src);
		}
	}
	for (var i=0; i<5; i++){
		blacks[i].index=i+8;
		blacks[i].onclick=function(){
			//alert(this.index);
			audios[this.index].load();
			audios[this.index].play();

			//alert(audios[this.index].src);
		}
	}

	/*document.body.onkeydown=function(e){
		document.title=e.keyCode;
		if(e.keyCode==65){
			audios[0].load();
			audios[0].play();
		}
	}*/
	// 操作键盘钢琴白键发出声音
	var keyCodes = new Array(83,68,70,71,72,74,75,76,69,82,89,85,73);
	document.body.onkeydown=function(e){
	//document.title=e.keyCode;
	for(var i=0; i<keyCodes.length; i++){
		if(e.keyCode==keyCodes[i]){
			if(i<8)
			{
				 buttons[i].style.background= "linear-gradient(45deg, #dad9d9, #ffffff)";
				 buttons[i].style.boxShadow="inset 3px -2px  0  #eeebeb";
			}else{
                blacks[i-8].style.background="linear-gradient(45deg, #4c4c4c, #444444)";
				blacks[i-8].style.boxShadow="inset 3px -5px 0 #2c2c2c";
			}
			audios[i].load();
			audios[i].play();
			
		
		}
	}
}

	document.body.onkeyup=function(e){
	//document.title=e.keyCode;
	for(var i=0; i<keyCodes.length; i++){
		if(e.keyCode==keyCodes[i]){
			if(i<8)
			{
				 buttons[i].style.background= null;
				 buttons[i].style.boxShadow="inset 5px -8px  0  #eeebeb";
			}else{
                blacks[i-8].style.background=null;
				blacks[i-8].style.boxShadow="inset 5px -7px 0 #2c2c2c";
			}
		}
	}
}
    
</script><audio src="audios/w1.ogv"></audio><audio src="audios/w2.ogv"></audio><audio src="audios/w3.ogv"></audio><audio src="audios/w4.ogv"></audio><audio src="audios/w5.ogv"></audio><audio src="audios/w6.ogv"></audio><audio src="audios/w7.ogv"></audio><audio src="audios/w8.ogv"></audio><audio src="audios/b1.ogv"></audio><audio src="audios/b2.ogv"></audio><audio src="audios/b3.ogv"></audio><audio src="audios/b4.ogv"></audio><audio src="audios/b5.ogv"></audio>
 


</body></html>